<template>
	<div class="container">
		<loading :show="isLoading"></loading>
		<Search v-model="search" :auto-scroll-to-top="true" position="absolute"></Search>
		<sticky :check-sticky-support="false" :offset="0">
			<tab :custom-bar-width="getw" :bar-active-color="parentCategory.barActive" :line-width="1">
				<tab-item
				v-for="(item,index) in parentCategory"
				:selected="index===0"
				:key="index"
				@on-item-click="tabCategory(item.id)">{{ item.name }}</tab-item>
			</tab>
		</sticky>
		<swiper dots-position="center" style="margin-top:5px;">
			<swiper-item class="swiper-demo-img" v-for="(item, key) in banner" :key="key" >
				<img :src="item.image" :alt="item.type" width="100%">
				</swiper-item>
		</swiper>

		<!-- <div class="shoplist">
			<ul>
				<li v-for="(item, index) in category" :key="index" v-on:click="goodsList(item.id)">
						<p><img :src="serverUrl + item.image" :alt="item.name" /></p>
						<span>{{ item.name }}</span>
				</li>
			</ul>
		</div> -->
		<div style="height:10px;"></div>
		<!--<a v-for="(item, key) in zhuangti" :key="key" @click='goodsInfo(item.id)' class="hotshop">-->
			<!--<span style="font-size:12px;">Loading</span>-->
			<!--<x-img :src="item.image" :webp-src="item.image" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="-100" container="#vux_view_box_body"></x-img>-->
			<!--<div class="titlecontent" style="text-align:left;">-->
				<!--<p style="font-weight:bold">{{item.name}}</p>-->
				<!--&lt;!&ndash; <p>{{item.detail}}</p> &ndash;&gt;-->
				<!--<p>{{item.price}}</p>-->
			<!--</div>-->

		<!--</a>-->
		<div class="shopbox">
			<ul>
				<li v-for="(item,index) in zhuangti" :key="index">
					<router-link :to="{name: 'GoodsInfo', query: { id: item.id }}">
						<x-img :src="item.image" :webp-src="item.image" class="goodpic" error-class="goodpic-error" :offset="300" v-if="render" :scroller="$refs.scrollerBottom" container="#vux_view_box_body"></x-img>
						<p class="chinaName">{{item.name}}</p>
						<div class="pricebox">
							<div>{{item.price}}</div>
						</div>
					</router-link>
				</li>

			</ul>
		</div>

		<tabbar>
			<tabbar-item :link="{ name: 'Index'}">
				<i slot="icon" class="fa icon-tabbar fa-home"></i>
				<span slot="label">首页</span>
			</tabbar-item>
			<tabbar-item :link="{ name: 'car' }" :badge="cartNum">
				<i slot="icon" class="fa icon-tabber fa-shopping-cart"></i>
				<span slot="label">购物车</span>
			</tabbar-item>
			<tabbar-item :link="{ name: 'Mine'}">
				<i slot="icon" class="fa icon-tabbar fa-user"></i>
				<span slot="label">我的</span>
			</tabbar-item>
		</tabbar>
	</div>
</template>
<script>
	import { getCategoryList, getBannerList } from '@/api/index'
	import { totalCart, goodsList } from '@/api/Goods'
	import { Tab, TabItem, Sticky, Search, Swiper, XImg, Tabbar, TabbarItem, SwiperItem, Loading } from 'vux'
	export default {
		name: 'index',
		components: {
			Tab,
			TabItem,
			Sticky,
			Search,
			Swiper,
			XImg,
			Tabbar,
			TabbarItem,
			SwiperItem,
			Loading
		},
		data() {
			return {
				query: {
					a: 'typeGoods',
					typeId: 3
				},
				cartNum: '0',
				serverUrl: process.env.SERVER_URL,
				search: null,
				parentCategory: [],
				banner: [],
				parent_id: '1',
				category: [],
				isLoading: false,
				zhuangti: []
			}
		},
		methods: {
			goodsInfo(id) {
				this.$router.push({name: 'GoodsInfo', query: {id: id}});
			},
			goodsList(id) {
				this.$router.push({name: 'Goods', query: {id: id}});
			},
			aaa(typeId) {
				this.query.typeId = typeId
				this.getGoodsList();
			},
			tabCategory(typeId) {
				this.query.typeId = typeId
				this.getGoodsList();
				// this.category = this.parentCategory[key].tmenu
			},
			getw(e) {
				if(this.parentCategory && this.parentCategory.length === 1) {
					return '0px'
				}
				return '20px'
			},
			success(src, ele) {
				//				console.log('success load', src)
				const span = ele.parentNode.querySelector('span')
				ele.parentNode.removeChild(span)
			},
			error(src, ele, msg) {
				//				console.log('error load', ele, src)
				const span = ele.parentNode.querySelector('span')
				span.innerText = 'load error'
			},
			// 获取商品顶级分类
			getCategory(parent_id) {
				getCategoryList({ a: 'typeList' }).then(response => {
					this.parentCategory = response.list
					console.log(this.parentCategory)
					// this.category = response.list;
				})
			},
			// 获取轮播图
			getBanner() {
				getBannerList({ a: 'bannerList' }).then(response => {
					this.banner = response;
				})
			},
			// 获取购物车商品总数
			getTotalCart() {
				totalCart().then(response => {
					this.cartNum = response.total
				});
			},
			getGoodsList() {
				this.isLoading = true
				goodsList(this.query).then(response => {
					this.zhuangti = response
					this.isLoading = false;
				});
			}
		},
		mounted() {
			this.getCategory(0);
			this.getBanner();
			// this.getTotalCart();
			this.getGoodsList();
		},
		// 监听到 tabbar 有变化
		watch: {
			footBar: (val, oldVal) => {
				console.log(oldVal)
				console.log(val);
			}
		}
	}
</script>
<style scoped lang="less">

	.swiperbox {
		width: 100%;
		margin: 10px auto 0;
	}

	.shoplist {
		padding: 15px;
	}

	.shoplist ul {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.shoplist ul li {
		flex: 0 1 18%;
	}

	.shoplist ul li p {
		/*height: 70px;*/
		overflow: hidden;
	}

	.shoplist ul li img {
		width: 100%;
	}

	.shoplist ul li span {
		font-size: 12px;
		color: #333;
	}

	.ximg-demo {
		width: 100%;
		height: auto;
	}

	.ximg-error {
		background-color: yellow;
	}

	.ximg-error:after {
		content: '加载失败';
		color: red;
	}

	.hotshop {
		display: block;
		margin: 0 auto 10px;
		width: 50%;
		float: left;
		position: relative;
		.titlecontent{
			position: absolute;
			left: 0;
			bottom: 0;
			background: rgba(0,0,0,.5);
			width: 100%;
			height: auto;
			padding: 15px;
			color: #FFF;
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			// padding-left: 20px;
			align-items: flex-start;
			box-sizing: border-box;
			p{
				line-height: 16px;
			}
		}
	}

	.container {
		background: #FFF;
	}

	.container .weui-tabbar {
		position: fixed;
	}

	.container {
		padding-bottom: 50px;
		overflow: hidden;
	}
	.shopbox {
		padding: 0 15px 100px;

	}

	.shopbox ul {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		/*padding-top: 30px;*/
	}

	.shopbox ul li {
		width: 48%;
		flex: 0 1 auto;
		margin-bottom: 10px;
	}.goodpic {
		 width: 100%;
		 height: auto;
	 }

	.goodpic-error {
		background-color: #C8C8CD;
	}

</style>
